<template>
	<view class="container">
		<view class="u-charts">
			<view class="flex">
				<view class="u-font-28 text-center w100 mtb-30">最近一周收益</view>
			</view>
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
		</view>

		<view class="list">
			<view class="tit">
				分成收入
			</view>
			<view class="list-item" v-for="(item,index) in list" :key="item.id">
				<text>{{item.createtime_text}}</text>
				<text class="money">+{{item.money}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
	import {
		form
	} from '../../api/api.js'
	var canvaLineA = null;
	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				chartData: {
					categories: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'],
					series: [{
						name: '成交量B',
						data: [70, 40, 65, 100, 44, 68, 55, 11]
					}]
				},
				list: []
			}
		},
		onLoad() {
			this.cWidth = uni.upx2px(690);
			this.cHeight = uni.upx2px(400);
			this.getFormInfo()
		},
		methods: {
			getFormInfo() {
				form({
					type: 1
				}).then(res => {
					this.list = res.data.data
					this.chartData.categories = res.data.zhexiantu.date
					this.chartData.series[0].data = res.data.zhexiantu.total
					this.showLineA("canvasLineA", this.chartData);
				})
			},
			showLineA(canvasId, chartData) {
				var _self = this;
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: {
						show: true
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						// min: 10,
						// max: 180,
						format: (val) => {
							return val.toFixed(2)
						return val.toFixed(1) 
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});

			},
			touchLineA(e) {
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
		},
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
	}

	.u-charts {
		width: 100%;
		// min-height: 600upx;
		padding-top: 30upx;
		background-color: #FFFFFF;

		.flex {
			width: calc(100% - 60upx);
			padding: 0 30upx;
			font-size: 28upx;
			margin-bottom: 20upx;
		}

		.charts {
			width: 100%;
			height: 320upx;
			background-color: #FFFFFF;

			canvas {
				width: 100%;
				height: 100%;
			}
		}


	}

	.list {
		width: 100%;
		background-color: #FFFFFF;
		margin-top: 30upx;

		.tit {
			width: calc(100% - 60upx);
			height: 60upx;
			line-height: 60upx;
			font-size: 28upx;
			font-weight: bold;
			margin: 0 auto;
			border-bottom: 1upx solid #f6f6f6;
		}
		
		.list-item{
			width: calc(100% - 80upx);
			padding: 0 10upx;
			height: 100upx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1upx solid #f6f6f6;
			
			.money{
				color: #ff9c9a;
			}
			
		}
		
	}
</style>
